import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {Form, Input} from "antd";
import {useEffect} from "react";
import {useDispatch} from "react-redux";
import {resetPageInfo} from "../../../store/pageInfoReducer";

const {TextArea} = Input
export const PageSetting = () => {
    const dispatch = useDispatch()
    const pageInfo = useGetPageInfo()
    const [form] = Form.useForm()

    useEffect(() => {
        form.setFieldsValue(pageInfo)
    }, [pageInfo]);

    function handleValuesChange() {
        dispatch(resetPageInfo(form.getFieldsValue()))
    }

    return (
        <Form layout={'vertical'} form={form} initialValues={pageInfo} onValuesChange={handleValuesChange}>
            <Form.Item label={'问卷标题'} name={'title'} rules={[{required: true, message: '标题不能为空'}]}>
                <Input placeholder={'请输入标题'}></Input>
            </Form.Item>
            <Form.Item label={'问卷描述'} name={'desc'}>
                <TextArea placeholder={'问卷描述'}></TextArea>
            </Form.Item>
            <Form.Item label={'样式代码'} name={'css'}>
                <TextArea placeholder={'输入样式代码'}></TextArea>
            </Form.Item>
            <Form.Item label={'脚本代码'} name={'js'}>
                <TextArea placeholder={'输入脚本代码'}></TextArea>
            </Form.Item>
        </Form>
    );
};